<template>
	<u-modal :show="show" :negativeTop="200" :title="title" confirmText="确定" showCancelButton confirmColor="#FD8906"
		cancelColor="#000" @confirm="save" @cancel="show = false" @close="show = false" zoom width="700rpx">
		<view class="f-1 w100 f12 ggwrap">
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10">排序</view>
				<view class="f-g-1">
					<u--input placeholder="请输入排序" :customStyl="{background:'#f3f3f3'}" v-model="form.sort">
					</u--input>
				</view>
			</view>
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10"><text class="crb">*</text>属性名称</view>
				<view class="f-g-1">
					<u--input placeholder="请输入属性名称" :customStyl="{background:'#f3f3f3'}" v-model="form.name">
					</u--input>
				</view>
			</view>
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10">属性值</view>
				<view class="f-g-1 ggz p10">
					<view class="f-g-1">
						<view class="f-bt">
							<view class="f-g-1 t-l">属性值</view>
							<view class="f-g-1 t-l">描述</view>
							<view class="f-g-0 t-c">操作</view>
						</view>
						<view class="f-bt f-y-c mt10" v-for="(item, index) in form.value" :key="index">
							<view class="f-g-1 srggz mr10">
								<u--input placeholder="请输入属性值" v-model="item.name"></u--input>
							</view>
							<view class="f-g-1 srggz">
								<u--input placeholder="请输入描述" v-model="item.desc"></u--input>
							</view>
							<view class="f-g-0 m02 t-r"><text class="cf06"
									@click.stop="delSpec(item,index)">删除</text>
							</view>
						</view>
					</view>
					<view class="w100 mt10">
						<view class="cf06" @click="addSpec">+ 添加属性值</view>
					</view>
				</view>
			</view>
		</view>
	</u-modal>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import site from '@/custom/siteroot.js';
	import config from '@/custom/config.js';
	export default {
		components: {

		},
		props: {
			mode: {
				type: String,
				default: () => 'single'
			},
			v: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				form: {
					sort: 1,
					name: '',
					desc: '',
					value: [{
						name: "",
						desc: ''
					}]
				},
				fileList1: [],
				show: false,
				rowId: '',
			}
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		methods: {
			open(v) {
				if (v && v.id) {
					this.title = '编辑规格'
					this.form = JSON.parse(JSON.stringify(v))
					this.rowId = v.id;
				} else {
					this.title = '新增规格'
					this.form = {
						sort: 1,
						name: '',
						desc: '',
						value: [{
							name: "",
							desc: ''
						}]
					}
					this.fileList1 = []
				}
				this.show = true
			},
			addSpec() {
				if (!this.form.value) this.form.value = [];
				this.form.value.push({
					name: "",
					desc: ''
				});
			},
			delSpec(v, i) {
				if (v && v.id) {
					uni.showModal({
						title: '温馨提示',
						content: '你确定要删除当前属性值吗',
						success: async (res) => {
							if (res.confirm) {
								let {
									msg
								} = await this.beg.request({
									url: `${this.api.delAttrValue}/${v.id}`,
									method: "DELETE",
								})
								this.$emit('save')
								uni.$u.toast(msg)
								let {
									data
								} = await this.beg.request({
									url: `${this.api.attrList}/${this.rowId}`,
									method: "GET",
								})
								this.form = data;
							}
						}
					})
				} else {
					this.form.value.splice(i, 1);
				}
			},
			close() {
				this.form = {
					sort: 1,
					name: '',
					value: [{
						name: "",
						desc: ''
					}]
				}
				this.show = false
			},
			async save() {
				if (!this.form.name) {
					return uni.showToast({
						title: '请输入属性名称',
						icon: 'none'
					})
				}
				this.form.storeId = this.storeId
				const {
					msg
				} = await this.beg.request({
					url: this.form.id ? `${this.api.attrList}/${this.form.id}` : this.api.attrList,
					method: this.form.id ? 'PUT' : 'POST',
					data: this.form
				})
				uni.showToast({
					title: msg,
					icon: 'none'
				})
				this.close()
				this.$emit('save')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.ggwrap {
		max-height: 900rpx;
		overflow: hidden;
		overflow-y: scroll;
	}

	.left {
		width: 110rpx;
		text-align: right;
	}

	.ggz {
		background: #f7f8fa;

		.srggz {
			width: 120rpx;
		}
	}
</style>